<template>
  <el-dialog :model-value="props.visible" @close="handleClose" title="输入链接" width="400">
    <div>
      <el-input v-model="url" autocomplete="请输入" style="flex: 2" />
    </div>
    <div style="display: flex; gap: 10px; margin-top: 10px">
      <span>常用网址:</span>
      <el-link :underline="false" @click="url = 'https://www.jd.com'">京东</el-link>
      <el-link :underline="false" @click="url = 'https://www.taobao.com'">淘宝</el-link>
      <el-link :underline="false" @click="url = 'https://www.baidu.com'">百度</el-link>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['update:visible', 'change']);

const url = ref('');
const handleOk = () => {
  if (!url.value) {
    ElMessage.error('URL不能为空');
    return;
  }
  emit('change', url.value);
  emit('update:visible', false);
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>
